@import "./reset.less";
@import "./variable.less";
@import "./common.less";
@import "./mixins.less";

// 1. 头部样式
.header {
  height: 30px;
  background-color: @bg-color;
  border-bottom: 1px solid @border-color;

  a {
    display: inline-block;
    height: 100%;
    line-height: 29px;
  }
}

.header-wrap {
  height: 100%;
}

.header-home {
  position: relative;
  padding-left: 16px;
  // text-indent: 16px;
  &::before {
    position: absolute;
    top: 8px;
    left: 0;
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../images/brand.png);
    background-repeat: no-repeat;
  }
}

.header-address {
  color: @text-color-2;
  margin-left: 8px;
  &::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 7px;
    background-image: url(../images/bg2.png);
    background-repeat: no-repeat;
    background-position: 0px -96px;
    margin-left: 5px;
  }
}

.header-certified {
  color: @text-color-2;
  padding-left: 20px;
  position: relative;
  margin-left: 5px;
  &::before {
    position: absolute;
    top: 8px;
    left: 0;
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-position: -10px -432px;
  }
}

.header-right {
  a {
    margin-left: 10px;
  }
  > li {
    position: relative;
  }
}

.header-shopcart {
  position: relative;
  padding-left: 20px;
  &::before {
    position: absolute;
    top: 6px;
    left: 0;
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-position: -290px -44px;
  }
}

.header-num {
  color: @red-color;
}

.header-my {
  position: relative;
  padding: 0 20px;
  &::before {
    position: absolute;
    top: 6px;
    left: 0;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-position: -312px -44px;
  }
  &::after {
    position: absolute;
    top: 12px;
    right: 5px;
    content: "";
    border-top: 4px solid @text-color-1;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }
}

.header-my-wrap {
  &:hover {
    .header-my-list {
      display: block;
    }
    .header-my {
      &::after {
        transform: rotate(180deg);
        transform-origin: 50% 25%;
        transition: 0.3s transform;
      }
    }
  }
}

.header-my-list {
  position: absolute;
  left: 12px;
  background-color: #fff;
  width: 100px;
  padding: 2px 0 5px 0;
  display: none;
  a {
    line-height: 12px;
    margin-left: 0;
    padding-left: 8px;
    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 7px;
      margin-right: 7px;
      background-image: url(../images/bg2.png);
      background-repeat: no-repeat;
      background-position: 0 -265px;
    }
  }
}

.header-collect {
  &::before {
    background-position: -354px -44px;
  }
}

.header-phone {
  position: relative;
  padding-left: 12px;
  &::before {
    position: absolute;
    top: 6px;
    left: -5px;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-position: -336px -44px;
  }
}

// 2. main的头部
.main-top {
  align-items: center;
  height: 150px;
}

.main-logo {
  height: 54px;
}

.main-nav {
  font-size: 16px;
  margin-left: 40px;
}

// .main-top-l {
//   display: flex;
//   align-items: center;
// }

// .search-wrap {
//   display: flex;
// }
.search-input {
  padding: 15px 20px;
  border: 1px solid @border-color;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  outline: none;
  font-size: 14px;
  width: 250px;
}
.search-btn {
  background-color: #fff;
  width: 48px;
  height: 48px;
  border: 1px solid @border-color;
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}

.main-navbar {
  position: relative;
  z-index: 10;
  padding-bottom: 30px;
  background-color: @bg-color;
}

.navbar-header {
  background-repeat: no-repeat;
  width: 230px;
  height: 57px;
  align-items: center;
  background-color: #fff;
  a {
    font-size: 14px;
  }
}

.left-active {
  background-image: url(../images/left-active.png);
  a:first-child {
    font-size: 16px;
  }
}

.right-active {
  background-image: url(../images/right-active.png);
  a:last-child {
    font-size: 16px;
  }
}

.navbar-item {
  height: 50px;
  cursor: pointer;
  align-items: center;
  border-left: 3px solid transparent;
  a {
    font-size: 14px;
    margin-right: 30px;
    margin-left: -3px;
  }

  img {
    margin-top: 5px;
    margin-right: -20px;
  }

  &:hover {
    background-color: #fff;
    border-color: @green-color;
  }
}

.navbar-line {
  height: 20px;
}

.main-carousel {
  width: 980px;
  margin-left: -10px;
  height: 417px;
  padding-top: 10px;
  img {
    width: 980px;
    height: 100%;
    border-radius: 10px;
  }
}

.sales-wrap {
  margin-top: 30px;
  margin-bottom: 20px;
  img {
    border-radius: 10px;
  }
}

.goods-list {
  background-color: @bg-color;
  padding-top: 20px;
}

.goods-header {
  align-items: center;
  height: 60px;
  span {
    font-size: 20px;
  }
}

.goods-nav {
  a {
    font-size: 18px;
    margin-left: 40px;
    padding-bottom: 8px;
  }
  .goods-nav-active {
    color: @green-color;
    border-bottom: 3px solid @green-color;
  }
}
.goods-item-wrap {
  display: flex;
  flex-wrap: wrap;
  .goods-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .goods-item:nth-child(4n) {
    margin-right: 0;
  }
}

.goods-item {
  display: block;
  width: 230px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  margin-right: 12px;
  background-color: #fff;
  cursor: pointer;
  &:hover {
    transform: scale(1.02);
    box-shadow: 0px 7px 7px 10px rgba(56, 56, 56, 0.05);
  }
}

.goods-img {
  width: 180px;
  height: 180px;
  margin: 10px 0;
}

.goods-title {
  width: 180px;
  height: 22px;
  font-size: 14px;
  color: @text-color-1;
}

.goods-desc {
  width: 220px;
  height: 20px;
  font-size: 12px;
  color: @text-color-3;
  margin-bottom: 10px;
}

.goods-price {
  color: @red-color;
  font-size: 14px;
}

.goods-origin-price {
  color: @text-color-3;
  font-size: 13px;
  text-decoration: line-through;
}

.brand-wrap {
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  div {
    width: 1800px;
  }
  a {
    width: 158px;
    height: 80px;
    margin-right: 40px;
    border: 1px solid @border-color;
    img {
      width: 110px;
      height: 60px;
    }
  }
}

.swiper-pagination {
  text-align: right;
  padding-right: 20px;
  span {
    background-color: @green-color;
  }
}
